<style rel="stylesheet/scss" lang="scss">
  .layout{
    border: 1px solid #d7dde4;
    background: #f5f7f9;
    position: relative;
    border-radius: 4px;
    overflow: hidden;
  }
  .layout-header-bar{
    background: #fff;
    box-shadow: 0 1px 1px rgba(0,0,0,.1);
  }
  .ivu-menu-dark.ivu-menu-vertical .ivu-menu-item-active:not(.ivu-menu-submenu),
  .ivu-menu-dark.ivu-menu-vertical .ivu-menu-submenu-title-active:not(.ivu-menu-submenu){
    color: #FFFFFF;
    border: none;
  }
  .ivu-menu-dark.ivu-menu-vertical .ivu-menu-item, .ivu-menu-dark.ivu-menu-vertical .ivu-menu-submenu-title{
    color: #FFFFFF;
    text-align: center;
  }
  .layout-logo-left{
    width: 90%;
    height: 30px;
    background: #5b6270;
    border-radius: 3px;
    margin: 15px auto;
  }
  .menu-icon{
    transition: all .3s;
  }
  .rotate-icon{
    transform: rotate(-90deg);
  }
  .ivu-menu-dark.ivu-menu-vertical .ivu-menu-item:hover{
    background: none;
  }
  .ivu-poptip-body{
    padding: 10px 0;
  }
</style>
<style rel="stylesheet/scss" lang="scss" scoped>
  .nav{
    position: relative;
    margin: 0 20px;
    color: #666666;
    float: left;
    span{
      position: relative;
      font-size: 14px;
      margin-right: 50px;
      cursor: pointer;
    }
  }
  .nav-right{
    float: right;
    i{
      font-size: 20px;
      margin-right: 20px;
      /*color: #0078C9;*/
      cursor: pointer;
    }
  }
.navTop{
  color: #FFFFFF;
  font-size: 14px;
  .logo{
    margin: 20px auto 10px;
    width: 44px;
    cursor: pointer;
  }
  i{
    display: block;
    margin-right: 0;
  }
  .iconfont{
    font-size: 25px;
  }
  .icon-home{
    color: #FFFFFF;
  }
}
.pop-company{
  ul{
    li{
      width: 160px;
      padding-left: 20px;
      cursor: pointer;
    }
    li:hover{
      color: #3385ff
    }
  }
}
.pop{
  width: 100%;
  box-sizing: border-box;
  ul{
    font-size: 13px;
    line-height: 26px;
    width: 180px;
    float: left;
    color: #444444;
    border-right: 1px #eeeeee solid;
    h4{
      line-height: 30px;
      padding-left: 20px;
    }
    li{
      width: 150px;
      padding-left: 30px;
      cursor: pointer;
    }
    li:hover{
      color: #3385ff
    }
  }
  ul:last-child{
     border-right: none;
  }
}
  .greyColor{
    color: #cccccc;
  }
  .greyColor:hover{
    color: #cccccc!important;
    cursor: auto;
  }
</style>

<template>
  <div class="layout">
    <Layout>
      <Sider class="navTop" :style="{position: 'fixed', height: '100vh',width:'100px',minWidth:'100px',maxWidth:'100px', left: 0, overflow: 'auto'}"
             ref="side1" hide-trigger collapsible :collapsed-width="78" >
        <Menu active-name="1-2" theme="dark" width="auto">
          <div class="logo">
            <img src="../assets/images/logo.png" />
          </div>
          <MenuItem name="1-1">
            <i class="iconfont icon-home"></i>
            <span>首页</span>
          </MenuItem>
          <MenuItem name="1-2">
            <i class="iconfont icon-jihua"></i>
            <span>计划</span>
          </MenuItem>
          <MenuItem name="1-3">
            <i class="iconfont icon-dingdan"></i>
            <span>出行</span>
          </MenuItem>
        </Menu>
      </Sider>
      <Layout>
        <Header :style="{padding: 0,position: 'fixed',left:'100px', width: 'calc(100% - 100px)'}" class="layout-header-bar">
          <div class="nav">
            <Poptip content="content" placement="bottom">
              <span style="color: #3385ff">TEM信息科技_dev33333333333 <i class="iconfont icon-down"></i></span>
              <div class="pop-company" slot="content">
                <ul>
                  <li></li>
                </ul>
              </div>
            </Poptip>
            <Poptip trigger="hover" width="900" content="content" placement="bottom-start">
              <span>管理 <i class="iconfont icon-down"></i></span>
              <div class="pop fix" slot="content">
                <ul>
                  <h4>待批事项</h4>
                  <li>- 待审批任务</li>
                  <li>- 审批记录</li>
                </ul>
                <ul>
                  <h4>账务结算</h4>
                  <li>- 公司支付账户查询</li>
                  <li>- 结算账单查询</li>
                </ul>
                <ul>
                  <h4>差旅预算管理</h4>
                </ul>
                <ul>
                  <h4>信息查询</h4>
                  <li>- 差旅订单汇总查询</li>
                  <li>- 机票订单查询</li>
                  <li>- 酒店订单查询</li>
                  <li>- 火车票订单查询</li>
                  <li>- 保险订单查询</li>
                  <li>- 其他订单查询</li>
                  <li>- 退单查询</li>
                  <li>- 差旅计划查询</li>
                  <li>- 审批记录查询</li>
                  <li>- 差旅订单查询</li>
                  <li class="greyColor">- 员工违规记录查询</li>
                </ul>
                <ul>
                  <h4>综合分析</h4>
                  <li>- 差旅支出分析</li>
                  <li>- 员工差旅地图</li>
                  <li>- 航司合作分析</li>
                  <li>- 节约与超支分析</li>
                  <li class="greyColor">- 费用管理全流程分析</li>
                  <li>- 会员及协议酒店分析</li>
                  <li>- 员工违规记录</li>
                </ul>
              </div>
            </Poptip>
            <Poptip trigger="hover" title="" width="540" content="content" placement="bottom-start">
              <span>设置 <i class="iconfont icon-down"></i></span>
              <div class="pop fix" slot="content">
                <ul>
                  <h4>基础信息设置</h4>
                  <li>-  企业信息</li>
                  <li>-  组织与员工信息</li>
                  <li>-  财务核算单元</li>
                </ul>
                <ul>
                  <h4>差旅管理设置</h4>
                  <li>- 职级标准设置</li>
                  <li>- 出行类别设置</li>
                  <li>- 差旅计划管理</li>
                  <li>- 行程预订管理</li>
                </ul>
                <ul>
                  <h4>其他设置</h4>
                  <li>- 国家分组</li>
                  <li>- 城市分组</li>
                  <li>- 费用类别设置</li>
                </ul>
              </div>
            </Poptip>
          </div>
          <div class="nav-right">
            <i class="iconfont icon-xiaoxi"></i>
            <Poptip trigger="hover" width="540" content="content" placement="bottom-end">
               <i class="iconfont icon-geren"></i>
              <div class="pop fix" slot="content">
                <ul>
                  <h4>基础信息</h4>
                  <li>-  个人信息</li>
                  <li>-  账号安全</li>
                  <li>-  个人帐户</li>
                </ul>
                <ul>
                  <h4>常用信息</h4>
                  <li>- 常用旅客</li>
                  <li>- 常用联系人</li>
                  <li>- 常用地址</li>
                </ul>
                <ul>
                  <h4>订阅通知</h4>
                  <li class="greyColor">- 短信</li>
                  <li class="greyColor">- 邮件</li>
                </ul>
              </div>
            </Poptip>
            <i class="iconfont icon-userback"></i>
          </div>
        </Header>
        <Content :style="{margin: '88px 20px 0px 120px', background: '#fff', minHeight: '1560px'}">
          Content
        </Content>
      </Layout>
    </Layout>
  </div>
</template>
<script>
  export default {
    data () {
      return {
      }
    },
    computed: {},
    methods: {
      collapsedSider () {
        this.$refs.side1.toggleCollapse();
      },

    }
  }
</script>
